<template>
    <Echart
     :options="options"
     id="productChart"
     height="3rem"
     width="100%"
    >
  </Echart>
</template>

<script>
import Echart from '@/common/echart'
import {nowSize} from '@/utils'
export default {
  name: 'chart',
  components:{
      Echart
  },
  data() {
      return {
         options:{} 
      }
  },
  computed:{
  
  },
  props:{
      cdata:{
        type: Array,
       default: () => ([])
      },
  },
  watch:{
      cdata:{
         handler(newData){
           this.options = {
              tooltip: {
              trigger: 'axis',
              axisPointer: {
              type: 'shadow'
              },
            borderColor: 'rgba(75, 253, 238, 0.4)',
            borderWidth: 1,
           },
            grid: {
                top: '10%',
                right: '2%',
                left: "2%",
                bottom: '30%'
            },
          xAxis: [{
              type: 'category',
              data: ["计划","实际","良品","不良品","良率"],
              axisLine: {
                  lineStyle: {
                      color: 'rgba(66, 192, 255, .3)',
                  }
              },
              axisLabel: {
                  margin: 10,
                  color: '#e2e9ff',
                  textStyle: {
                      fontSize: nowSize(18),
                      color:'#4c9bfd'
                  },
              },
              axisTick: {
                  show: false
              }
          }],
            yAxis: [{
              show: false,
              type: 'value',
             },
          ],
          series: [{
              type: 'bar',
              data: newData,
              barWidth: '35%',
              itemStyle: {
                  normal: {
                      color:(params)=>{
                        let colors=[]
                       const badIndex=3
                       if(params.dataIndex == badIndex){
                           colors= ["red","red"]
                       }else if(params.dataIndex == 0){
                          colors= ["#29acff","#29acff"]
                       }
                       else{
                           colors=['rgba(0,244,255,1)','rgba(0,77,167,1)']
                       }
                       return  new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: colors[0] // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: colors[1] // 100% 处的颜色
                      }])
                      },
                     
                      shadowColor: 'rgba(0,160,221,1)',
                      shadowBlur: 4,
                  }
              },
              label: {
                  normal: {
                      show: true,
                      lineHeight: 10,
                      formatter: '{c}',
                      position: 'top',
                      textStyle: {
                          color: '#00D6F9',
                          fontSize: nowSize(18)
                      }

                  }
              }
          }]
          };
        },
        immediate:true,
        deep:true
      }
   }
 }
</script>

<style lang = "scss" scoped>

</style>
